<template>
  <default-header-search 
    :formItemList="headerSearchConfig.formItemList" 
    :searchButtonLoading="headerSearchConfig.searchButtonLoading"
    @searchSubmit="headerSearch"
    :formConfig="{}" />
      <default-table 
        v-loading="headerSearchConfig.searchButtonLoading"
        :tableColumn="tableConfig.tableColumn" 
        :tableData="tableConfig.data"
        :paginationConfig="tableConfig.paragition"
        @selectionChange="changeSelection"
        :tableConfig="tableConfig.config">
        <template #middleware>
          <el-button type="success" :icon="Plus">新增</el-button>
          <el-button type="danger" :icon="Delete" :disabled="tableConfig.selectRow.length === 0">删除</el-button>
          <el-button :icon="Upload">上传</el-button>
          <el-button :icon="Download">下载</el-button>
        </template>
        <template #operation="scope">
          <el-button link :icon="Edit" type="primary" @click="editRow">修改</el-button>
        </template>
      </default-table>
</template>

<script setup lang="ts">
import { Plus, Edit, Delete, Upload, Download } from '@element-plus/icons-vue'
const headerSearchConfig = reactive({
  formItemList: [
    {
      prop: "dictionaryName",
      label: "字典名称",
      placeholder: "请输入字典数据名称",
      inputType: "input"
    }
  ],
  searchButtonLoading: false
})
const tableConfig = reactive<any>({
    data: [],
    config: {
      height: 242,
      needSelection: true,
      needIndex: true,
      needOperation: 1
    },
    tableColumn: [
      {
        prop: 'dictionary_type',
        label: '字典数据类型'
      },
      {
        prop: 'dictionary_name',
        label: '字典数据名称'
      },
      {
        prop: 'data_type',
        label: '数据值'
      },
      {
        prop: 'data_name',
        label: '数据名称'
      },
      {
        prop: 'other_info',
        label: '其他描述'
      },
      {
        prop: 'parent_id',
        label: '父级id'
      },
    ],
    selectRow: [],
    paragition: {
        page: 1,
        pageSize: 10,
        total: 0
    }
})
// 搜索接口 搜索数据获取
const headerSearch = async (val: any) => {
  /**
   *  1.打开loading
   *  2.数据获取
   *  3.数据赋值
   *  4.收尾 -> 关loading 找bug
   */
  // 第一步
  headerSearchConfig.searchButtonLoading = true
  // 第二步 数据获取
  // 用户输入的内容传递到后端 分页参数
  // 使用es6的扩展运算符 ...
  // let obj = {...val, ...{page: 当前页, pageSize: 当前每页参数}}
  let obj = { 
    ...val, 
    ...{ page: tableConfig.paragition.page, pageSize: tableConfig.paragition.pageSize } 
  }
  console.log(obj)
  const data = await init(obj)
  // 第三步
  tableConfig.data = data.data
  tableConfig.paragition.total = data.total
  // 第四步
  headerSearchConfig.searchButtonLoading = false



}
// 基础数据获取
const init = async (form: any): Promise<any> => {
    const { data } = await UseHttpFetch('/api/dictionary/search', { server: false })
    return Promise.resolve(data.value)
}
// 修改按钮点击事件
const editRow = (row: any) => {
  console.log(row)
}
// 表格多选改变事件
const changeSelection = (row: Array<any>) => {
  tableConfig.selectRow = row
}
</script>
